<template>
    <h1>我是购物车</h1>
    全选 <input :checked="checkedNum === list.length" type="checkbox" @click="clickAll" /> 总计: {{ totalPrice }}

    <pro :list="list" @setprice="setTotalPrice" @setcheckednum="setNum" />
</template>

<script>
import pro from './components/pro.vue'
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    proName: "羊肉串",
                    proPrice: 20,
                    proNumber: 5,
                    proStatus: true,
                },
                {
                    id: 2,
                    proName: "一个食品",
                    proPrice: 10,
                    proNumber: 3,
                    proStatus: false,
                },
                {
                    id: 3,
                    proName: "一个手机",
                    proPrice: 1000,
                    proNumber: 1,
                    proStatus: false,
                },
            ],
            totalPrice: 0,
            checkedNum: 0,
        };
    },
    methods: {
        // 全选商品
        clickAll(e) {
            this.list.forEach((item) => {
                item.proStatus = e.target.checked;
            });
        },
        //设置总计
        setTotalPrice(price) {
            this.totalPrice = price
        },
        setNum(num) {
            this.checkedNum = num
        }
    },
    components: {
        pro,
    }
};
</script>

<style></style>
